<template>
  <div>
    <page-header-wrapper content="主要完成树结构数据的管理">
      <TwoArea title="编辑节点信息" :leftWidth="4" :showTitle="false">
        <Left slot="left" ref="tree" title="树管理" @click="onClick"></Left>
        <div slot="right">
          <a-tabs v-model="tab">
            <a-tab-pane :key="1" tab="编辑信息"></a-tab-pane>
            <a-tab-pane :key="2" tab="其他功能"></a-tab-pane>
          </a-tabs>
          <div v-if="tab===1">
            <div v-show="!hasData">没有数据！</div>
            <table class="form" v-show="hasData">
              <tr>
                <td class="label w100">名称</td>
                <td><a-input class="w200" v-model.trim="obj.name"/></td>
              </tr>
              <tr>
                <td class="label">编码</td>
                <td><a-input class="w200" v-model.trim="obj.code"/></td>
              </tr>
              <tr>
                <td class="label">操作</td>
                <td><a-button type="primary" @click="update">保存</a-button></td>
              </tr>
            </table>
          </div>
        </div>
      </TwoArea>
    </page-header-wrapper>
  </div>
</template>

<script>
import Left from './Left'
export default {
  components: {
    Left
  },
  data () {
    return {
      tab: 1,
      item: null,
      hasData: false,
      obj: {}
    }
  },
  methods: {
    onClick (item) {
      this.item = item
      this.$http.get('${baseMapping}/info', { id: item.key }, data => {
        this.obj = data
        this.hasData = true
      })
    },
    update () {
      if (this.obj.name.length === 0) {
        this.$error({ title: '名称不能为空' })
        return
      }
      this.$http.post('${baseMapping}/update', this.obj, data => {
        this.$refs.tree.rename(this.item, data.name)
        this.$message.info({ duration: 1, content: '操作成功' })
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
